import React, { useState, useEffect } from 'react'
import { NavBar, SearchBar, Toast, List ,Image} from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
function Index() {
  const navigate = useNavigate()
  const [list, setlistt] = useState([])
  const xuanRan = async () => {
    const res = await axios.get('/api/list')
    console.log(res, 'res==')
    const { code, data, message } = res.data
    if (code == 200) {
      Toast.show(message)
      setlistt([...list, ...data])
    }
  }
  useEffect(() => {
    xuanRan()
  }, [])
  const tz = (item) => {
   navigate (`/xx`,{state:item})
 }
  return (
    <div>
      <NavBar onBack={() => navigate('/')}>发消息</NavBar>
      <SearchBar placeholder='请输入内容' />
      <div>
        <List>
          {
            list.length > 0 && list.map((item, index) => {
              return <List.Item key={index}
                
                prefix={
                  <Image
                    src={item.image}
                    width={64}
                    height={64}
                    fit='cover'
                    style={{ borderRadius: 32 }}
                  />
                }
                onClick={()=>tz(item)}
              >{item.title}</List.Item>
            })
          }
        </List>
      </div>
    </div>
  )
}

export default Index
